<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  </style>
</head>

<body style='padding:25px;'>

  <div class='leftContent'>
    <pre id='content'></pre>
  </div>

  <div class='rightContent'>
    <pre id='resume'></pre>
  </div>

</body>
<style id='styleTag'>


</style>
<!-- <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css'> -->
</link>

<script src="./marked.js"></script>
<script>

  /* 间隔时间 */
  const interval = 8;

  /* 左侧字数 */
  let leftCount = 0;

  /* 右侧字数 */
  let rightCount = 0;

  /* 简历内容 */
  const resumeContent = [`
  ## MyResume
  
  ### name : *Ban Yuan*
  ### slogen : *一次相遇终身相伴*
  ### Email : *contact@banyuan.club*
  ### website : www.banyuan.club`
  ];

  /* 叙述内容 */
  const styleContent = [
    `/* Hello, My name is Ban Yuan,
  * This is how I write my resume.
  * I hope you like it~
  * ===================================================
  */`, `/* This interface is not like development interface.
  /* So , let me beautify the interface ^_^
  */`, `
  *{
    transition: all .3s;
  }
  ::-webkit-scrollbar {
    -webkit-appearance: scrollbartrack-vertical;
  }
  
  html {
    color: #06EB00; background: #030303;
  }
  .leftContent {
    padding: 5px;
    border: 1px solid;
    overflow: auto;
    width: 45vw; 
    height: 90vh;
    float:left;
  }
  /* It looks like a  command-line tool now , right ?
  /* Let me finish my resume~
  * ====================================================
  * First of all , I need a paper.
  */
  .rightContent {
    float:left;
    padding: 5px;  
    width: 45vw; 
    height: 90vh; 
    border: 1px solid;
    background: white; 
    color: #222;
    overflow: auto;
    margin-left:2vw;
  }
  /* Now, I got a white paper. 
  * Let me start~~
  */`, `/*As you see, it wirte by markdown grammar.
  /*Let me translated into HTML by using marked package.*/
  /*Let us start~*/
  /*....1....*/
  /*....2....*/
  /*....3....*/
  /*.action!.*/`, `
  /*Emmmmmmmmmmmmmmmm......*/
  /*It is not pretty right?*/
  /*So I use css to beautify my resume. I use github-markdown-css.*/
  /*Let us start~*/
  /*....1....*/
  /*....2....*/
  /*....3....*/
  /*...go!...*/`,
    `/*And here we are.*/?`
  ];

  /* style构建字符串 */
  let styleStr = styleContent.join('');

  /* 动态style部分 */
  let styleTag = document.getElementById('styleTag');

  /* 内容部分 */
  let content = document.getElementById('content');

  /* 简历部分 */
  let resume = document.getElementById('resume');

  var leftContentEle = document.getElementsByClassName('leftContent')[0];

  var timeOutTimer;

  /* 向左侧与style添加内容 */
  function addContentToLeft() {

    /* 左边增加内容 */
    content.innerHTML = styleStr.substring(0, leftCount);

    /* style更新 */
    styleTag.innerHTML = styleStr.substring(0, leftCount);

    scrollToBottom(leftContentEle);
  }

  /* 显示部分 */
  function showContent() {

    /* 显示简历之前 */
    if (leftCount < styleContent.slice(0, 3).join('').length) {

      leftCount++

      addContentToLeft()


    } else {

      /* 开始显示简历 */
      rightCount++

      resume.innerHTML = resumeContent[0].substring(0, rightCount);

      /* 简历显示完成，继续显示左边内容 */
      if (rightCount > resumeContent[0].length) {

        leftCount++
        /* 继续向左边增加内容 */
        addContentToLeft()

        /* 解析markdown语法 */
        if (leftCount >= styleContent.slice(0, 4).join('').length) {

          /* marked */
          resume.innerHTML = marked(resumeContent[0].substring(0, rightCount));
        }
      }

      /* 添加class，增加样式 */
      if (leftCount > styleContent.slice(0, 5).join('').length) {

        resume.className = 'markdown-body'
      }
    }

    /* 结束，清除定时器 */
    if (leftCount > styleStr.length) {
      reset();
    } else {
      requestAnimationFrame(showContent);
    }
  }

  function start() {

    clearTimeout();
    /* 定时调用，增加字数 */
    requestAnimationFrame(showContent)
  }

  /* 滑动到最底部 */
  function scrollToBottom(ele) {

    if (ele) {
      ele.scrollTop = ele.scrollHeight
    }

  }

  function reset() {

    timeOutTimer = setTimeout(function () {

      leftCount = 0;
      rightCount = 0;
      resume.className = '';
      resume.innerHTML = '';
    }, 3000)

  }

  function clearTimeout() {

    if (timeOutTimer) {
      clearTimeout(timeOutTimer);
    }
  }

  start();
</script>

</html>